import { Table, Tag, Space } from 'antd';

export default function AntdTalbleDemo() {

    const dataColumns = [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          dataIndex: 'tags',
          key: 'tags',
          render: (x, {tags}) => tags.map(tag => (
            <Tag color="blue" key={tag}>
              {tag}, {x}
            </Tag>
          ))
        },
        {
          title: 'Action',
          key: 'action',
          dataIndex: 'action',
          render: (a, record) => (
            <Space style={{color:'green'}}>
              <span >使用Antd.Space</span>
              <span >避免组件粘在一起</span>
            </Space>
          )
        }
      ];

      const data = [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney NoPark',
          tags: ['cool', 'teacher'],
        }
      ]

    return (
        <>
            <div>
                <h5>Antd Table Demo | <a rel="stylesheet" href="https://ant.design/components/table">官方文档</a></h5>
            </div>
            <Table columns={dataColumns} dataSource={data}/>
        </>
    );
}